<template>
  <button @click="playVoice">播放语音</button>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
// @ts-ignore
import Speech from 'speak-tts';

const playVoice = async () => {
  const speech = new Speech();

  if (speech.hasBrowserSupport()) {
    await speech.init({
      lang: 'zh-CN',
      rate: 1,
      pitch: 1,
    });
    speech.speak({
      text: '这是要播放的文字',
      listeners: {
        onstart: () => console.log('开始播放'),
        onend: () => console.log('播放结束'),
      },
    });
  } else {
    alert('当前浏览器不支持语音播报');
  }
};

onMounted(() => {
  // 初始化检查
});
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
